<template>
  <el-container>
    <el-main>
      <!--搜索-->
      <el-row style="margin-top: 2%;margin-left: 20%;margin-bottom: 1%">
        <el-col :span="6">
          <el-select clearable v-model="value" laceholder="请选择" @change="refreshData">
            <el-option v-for="item in categoryList" :key="item.categoryId" :label="item.categoryDetail"
                       :value="item.categoryId">
              <span style="float: left">{{ item.categoryDetail }}</span>
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="10">
          <el-input prefix-icon="el-icon-search" v-model="input" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="3">
          <el-button @click="search" type="primary" icon="el-icon-search">搜索</el-button>
        </el-col>
      </el-row>
      <!--列表-->
      <el-row>
        <el-col :span="18" :offset="3">
          <el-table :data="collectionList" style="width: 100%">
            <el-table-column align="center" label="时期" width="300">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.collectionEra }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="藏品名" width="350">
              <template slot-scope="scope">
                <el-popover width="500" trigger="hover" placement="left">
                  <p>藏品名: {{ scope.row.collectionName }}</p>
                  <p>详情: {{ scope.row.collectionDetail }}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.collectionName }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot="header" slot-scope="scope">
                <el-button size="medium" type="primary" @click="handleAdd">添加
                </el-button>
              </template>
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.row.collectionId)">编辑</el-button>
                <el-button size="mini" type="danger"
                           @click="handleDelete(scope.row.collectionId, scope.row.collectionName)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-main>

    <el-dialog :title="actionType" :visible.sync="openDialog" width="30%" center>
      <el-form :model="formData">
        <el-form-item>
          <el-input placeholder="藏品名称" v-model="formData.collectionName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formData.categoryId">
            <el-option v-for="category in categoryList" :value="category.categoryId"
                       :label="category.categoryDetail"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="藏品详情" v-model="formData.collectionDetail"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="藏品时期" v-model="formData.collectionEra"></el-input>
        </el-form-item>
        <el-upload
            class="upload-demo"
            drag
            action=""
            on-success="clearFiles"
            :http-request="fileUpload"
            multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将展览图片拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="openDialog = false">取 消</el-button>
    <el-button type="primary" @click="addOrModify">确 定</el-button>
  </span>
    </el-dialog>
  </el-container>
</template>

<script>
import {categorySearch, search, upImage} from "@/api/request";

export default {
  data() {
    return {
      input: '',
      categoryList: [],
      collectionList: [],
      value: '',
      openDialog: false,
      actionType: '',
      formData: {},
    }
  },
  methods: {
    fileUpload(param) {
      const formData = new FormData()
      formData.append('file', param.file)
      upImage(formData).then(
          res => {
            if (res.data.code === 1) {
              this.formData.collectionImage = res.data.data.url
              console.log(res.data.data.url)
            }
          }
      )
    },
    handleAdd() {
      this.formData = {}
      this.actionType = '添加藏品'
      this.openDialog = true
    },
    handleEdit(id) {
      let data = {
        collectionId: id
      }
      this.$http.post('/api/collections/search', data).then(
          res => {
            if (res.data.code === 1) {
              this.formData = res.data.data[0]
            }
          }
      )
      this.actionType = '修改藏品'
      this.openDialog = true
    },
    handleDelete(id, name) {
      this.$http.delete('/api/collections/delete/' + id).then(
          res => {
            if (res.data.code === 1) {
              this.$message.success("成功删除")
            } else {
              this.$message.error(res.data.description)
            }
          }
      )
    },
    addOrModify() {
      if (this.actionType === '添加藏品') {
        this.$http.post('/api/collections/insert', this.formData).then(
            res => {
              if (res.data.code === 1) {
                this.$message.success(res.data.description)
              } else {
                this.$message.error(res.data.description)
              }
              this.search()
            }
        )
      } else {
        this.$http.post('/api/collections/update', this.formData).then(
            res => {
              if (res.data.code === 1) {
                this.$message.success(res.data.description)
              } else {
                this.$message.error(res.data.description)
              }
              this.search()
            }
        )
      }
      this.openDialog = false
    },
    search() {
      let data = {
        collectionName: this.input,
        categoryId: this.value
      }
      search(data).then(res => {
        this.collectionList = res.data.data
      })
    },
    refreshData(val) {
      this.$forceUpdate()
    },
  },
  mounted() {
    categorySearch().then(
        res => {
          if (res.data.code === 1) {
            this.categoryList = res.data.data
          }
        }
    )
    this.search()
  }
}
</script>

<style scoped>
.el-form-item {
  margin-top: 2% !important;
}
</style>
